<script lang="ts" setup>
import { ref } from 'vue';
	
	type Data = {
	    mobile : string
	    password : string
	    intro : string
	}
	const formData = ref<Data>({
	    mobile: '',
	    password: '',
	    intro: ''
	})
	
	const formRules = {
	    mobile: {
	      rules: [
	        {
	          required: true,
	          errorMessage: '请输入手机号',
	        },
			{ 
			  pattern: '^[1][3-8][0-9]{9}$', 
			  errorMessage: '手机号码格式不正确',
			},
	      ]
	    },
		password: {
		      rules: [
		        { required: true, errorMessage: '请输入密码' },
		        { pattern: '^[a-zA-Z0-9]{8}$', errorMessage: '密码格式不正确' },
		      ],
		    }
	  }
	
	  const formRef = ref(null)
	  const onSubmit = async () => {
	      try {
	        const res = await formRef.value.validate()
	        console.log(res);
	      } catch (e) {
	        console.log(e);
	      }
	  }
</script>

<template>
	<view class="box">
		<uni-forms ref="formRef"  :rules="formRules" v-model="formData" :label-width="60">
			<uni-forms-item label="手机号" name="mobile">
				<uni-easyinput type="text" v-model="formData.mobile" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="描述" name="intro">
				<uni-easyinput type="textarea" v-model="formData.intro" placeholder="请输入自我介绍" />
			</uni-forms-item>
			<button type="primary" @click="onSubmit">提交</button>
		</uni-forms>
	</view>
</template>

<style lang="scss">
	.box {
		padding: 40rpx;
	}
</style>
